<template>
  <view class="result-container">
    <view class="result-icon" :class="paymentSuccess ? 'success' : 'fail'">
      <uni-icons :type="paymentSuccess ? 'checkmarkempty' : 'closeempty'" size="100" :color="paymentSuccess ? '#07c160' : '#e64340'"></uni-icons>
    </view>
    <view class="result-text">
      <text class="title">{{ paymentSuccess ? '支付成功' : '支付失败' }}</text>
      <text class="desc">{{ resultMessage }}</text>
    </view>
    <view class="btn-container">
      <button class="btn" @click="goOrderDetail">查看订单</button>
      <button class="btn" @click="goHome">返回首页</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const paymentSuccess = ref(false);
const resultMessage = ref('');
const orderId = ref('');

onLoad((options) => {
  orderId.value = options.orderId || uni.getStorageSync('currentOrderId');

  if (orderId.value) {
    checkOrderStatus();
  } else {
    resultMessage.value = '订单ID不存在';
  }
});

const checkOrderStatus = async () => {
  try {
    const res = await getOrderDetail(orderId.value);
    if (res.data && res.data.code === 200) {
      const order = res.data.data;
      paymentSuccess.value = order.status === '已支付';
      resultMessage.value = paymentSuccess.value ? '您的订单已支付成功' : '支付处理中，请稍后查看';
    } else {
      resultMessage.value = '获取订单状态失败';
    }
  } catch (error) {
    resultMessage.value = '网络错误，请重试';
  }
};

const goOrderDetail = () => {
  uni.navigateTo({
    url: `/pages/order-detail/order-detail?orderId=${orderId.value}`
  });
};

const goHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  });
};
</script>

<style scoped>
.result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 40rpx;
  height: 100vh;
  background-color: #fff;
}

.result-icon {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 60rpx;
}

.success {
  background-color: rgba(7, 193, 96, 0.1);
}

.fail {
  background-color: rgba(230, 67, 64, 0.1);
}

.result-text {
  text-align: center;
  margin-bottom: 100rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.desc {
  font-size: 32rpx;
  color: #666;
}

.btn-container {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 40rpx;
}

.btn {
  width: 280rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border-radius: 50rpx;
  font-size: 32rpx;
}

.btn:first-child {
  background-color: #07c160;
  color: #fff;
}

.btn:last-child {
  background-color: #fff;
  color: #07c160;
  border: 2rpx solid #07c160;
}
</style>